/*
 * @Author: wangqizhang
 * @Date: 2024-04-21 19:36:17
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-23 19:42:31
 * @FilePath: /suixinji-react/src/page/login/components/loginForm/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import { Form, Input, Button, Card, Space, message } from 'antd';
import './index.scss';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import type { FormProps } from 'antd';
import { setSessionStorage } from '../../../../untils';
import request from '../../../../api/request';

type FieldType = {
  user_name: string;
  pass_word: string;
};
const LoginForm = () => {
  const navigate = useNavigate();
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    const res = await request.post({
      url: '/user/login',
      data: values,
      needCache: false,
    });
    if (res.code === '0000') {
      setSessionStorage('token', 'Bearer ' + res.data.token);
      message.success('登录成功');
      navigate('/home');
    } else {
      message.error(res.message);
    }
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (
    errorInfo
  ) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Card
      extra={<Button type="link">注册账号</Button>}
      title={'您好，请登录😊'}
      className="login-form animate__animated animate__fadeInDown"
    >
      <Form
        labelCol={{ span: 0 }}
        wrapperCol={{ span: 24 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="user_name"
          rules={[{ required: true, message: '请输入用户名！' }]}
        >
          <Input
            prefix={<UserOutlined></UserOutlined>}
            placeholder="请输入用户名/admin"
          />
        </Form.Item>
        <Form.Item
          name="pass_word"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password
            prefix={<LockOutlined></LockOutlined>}
            placeholder="请输入密码/123456"
          />
        </Form.Item>
        <Form.Item>
          <Space align="center">
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button danger>找回密码</Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};
export default LoginForm;
